<script lang="ts" setup>
import { toRefs } from 'vue';
const props = defineProps({
  color: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 40
  },
})
const { color } = toRefs(props)
</script>
<template>
  <div class="icon icon-play">
    <svg t="1511248787040" class="icon-ring" style="" viewBox="0 0 1024 1024" version="1.1" :width="size"
      :height="size">
      <path d="M512 32A480 480 0 1 1 32 512 480 480 0 0 1 512 32m0-32a512 512 0 1 0 512 512A512 512 0 0 0 512 0z"
        :fill="color">
      </path>
    </svg>
    <svg t="1511248293675" class="icon-arrow" style="" viewBox="0 0 1024 1024" version="1.1" p-id="2047" width="16"
      height="16">
      <path
        d="M842.524444 448.341333 321.706667 96.483556C269.767111 61.383111 227.555556 83.740444 227.555556 146.545778l0 730.794667c0 62.862222 42.154667 85.219556 94.151111 50.119111l520.760889-351.857778C894.464 540.501333 894.520889 483.498667 842.524444 448.341333z"
        :fill="color">
      </path>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
.icon-play {
  width: 56px;
  height: 56px;

  .icon-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
  }
}
</style>